
<script setup>
import { ref } from 'vue'
//Z轴向上,车头朝向Y轴,右手坐标系
  const valueX = ref('0')
  const valueY = ref('0')
  const valueZ = ref('0')
  let msgA = ref('')
  let msgB = ref('')
  let msgC = ref('')
  let msgD = ref('')

  //a,b,c,d点变量
  let ax = ref(-100)
  let ay = ref(100)
  let az = ref(0)

  let bx = ref(100)
  let by = ref(100)
  let bz = ref(0)

  let cx = ref(-100)
  let cy = ref(0)
  let cz = ref(0)

  let dx = ref(100)
  let dy = ref(0)
  let dz = ref(0)

  //定义车辆长、宽
  const Car = {
    width : 315,
    height: 615
  }
  const normalVector = [0,0,1]; // Normal vector of plane (x, y)
  //x,y,z
  // const pointA = [0 - parseInt(Car.width/2), parseInt(Car.height), 0]
  // const pointB = [parseInt(Car.width/2), parseInt(Car.height),0]
  // const pointC = [0 - parseInt(Car.width/2), 0, 0]
  // const pointD = [parseInt(Car.width/2), 0, 0]
  
  //点击button
  function computeValue() {
    const pointA = [ax.value, ay.value, az.value]
    const pointB = [bx.value, by.value, bz.value]
    const pointC = [cx.value, cy.value, cz.value]
    const pointD = [dx.value, dy.value, dz.value]
    const x1Degrees = valueX.value; // Rotation around x-axis in degrees
    const y1Degrees = valueY.value; // Rotation around z-axis in degrees
    const z1Degress = valueZ.value; //

    let point = pointA;
    let outPoint = rotatePoint(point, x1Degrees, y1Degrees, z1Degress);
    let distance = distanceToPlane(outPoint);
    msgA.value = JSON.stringify(outPoint) + ', distance='+distance;

    point = pointB;
    outPoint = rotatePoint(point, x1Degrees, y1Degrees, z1Degress);
    distance = distanceToPlane(outPoint);
    msgB.value = JSON.stringify(outPoint) + ', distance='+distance;

    point = pointC;
    outPoint = rotatePoint(point, x1Degrees, y1Degrees, z1Degress);
    distance = distanceToPlane(outPoint);
    msgC.value = JSON.stringify(outPoint) + ', distance='+distance;

    point = pointD;
    outPoint = rotatePoint(point, x1Degrees, y1Degrees, z1Degress);
    distance = distanceToPlane(outPoint);
    msgD.value = JSON.stringify(outPoint) + ', distance='+distance;
  }

  //右手螺旋法则
  function rotatePoint(point, xAngle, yAngle, zAngle) {
    const x = point[0],y = point[1],z = point[2];
    // 首先，将角度转换为弧度
    const xRad = xAngle * Math.PI / 180;
    const yRad = yAngle * Math.PI / 180;
    const zRad = zAngle * Math.PI / 180;

    // 计算绕x轴旋转后的中间点a'
    const x1 = x;
    const y1 = y * Math.cos(xRad) - z * Math.sin(xRad);
    const z1 = y * Math.sin(xRad) + z * Math.cos(xRad);

    // 计算绕y轴旋转后的中间点a'
    const x2 = x1 * Math.cos(yRad) + z1 * Math.sin(yRad);
    const y2 = y1;
    const z2 = x1 * -Math.sin(yRad) + z1 * Math.cos(yRad);

    // 然后，计算绕z轴旋转后的最终点a3
    const x3 = x2 * Math.cos(zRad) - y2 * Math.sin(zRad);
    const y3 = x2 * Math.sin(zRad) + y2 * Math.cos(zRad);
    const z3 = z2;

    // 返回最终点a2的坐标
    return { x: x3.toFixed(4), y: y3.toFixed(4), z: z3.toFixed(4) };
  }


  function distanceToPlane(point) {
    // Calculate the distance
    const pointVector = [point.x, point.y, point.z];
    //Math.abs((A * xm + B * ym + C * zm + D) / Math.sqrt(A * A + B * B + C * C));
    const distance = Math.abs(pointVector[2] * normalVector[2]) / Math.sqrt(normalVector[0] * normalVector[0] + normalVector[1] * normalVector[1] + normalVector[2] * normalVector[2])
    return distance
  }
  
</script>

<template>
  <div>
    <text>右手螺旋法则,Z轴向上</text>
    <!-- <text>右手螺旋法则，长：{{ Car.height }}, 宽：{{ Car.width }}</text> <br> -->
    <!-- <text>位置：A={{ pointA }},B={{ pointB }},C={{ pointC }},D={{ pointD }}</text> -->
    <br>
  </div>
  <br>
  <hr class="my-divider"/>
  <br>
  <div>
    点A: <br>x=<input v-model="ax"/>    y=<input v-model="ay"/>    z=<input v-model="az"/><br>
    点B: <br>x=<input v-model="bx"/>    y=<input v-model="by"/>    z=<input v-model="bz"/><br>
    点C: <br>x=<input v-model="cx"/>    y=<input v-model="cy"/>    z=<input v-model="cz"/><br>
    点D: <br>x=<input v-model="dx"/>    y=<input v-model="dy"/>    z=<input v-model="dz"/><br>
  </div>
  <br>
  <hr class="my-divider"/>
  <br>
  <div>
    旋转角度:<br>
    X:<input v-model="valueX"/>
    Y:<input v-model="valueY"/>
    Z:<input v-model="valueZ"/>
  </div>
  <br>
  <br>
  <hr class="my-divider"/>
  <br>
  <br>
  <div>
    旋转后的坐标和点到平面(x,y)的距离:<button @click="computeValue">计算</button><br>
    A: {{ msgA }}<br>
    B: {{ msgB }}<br>
    C: {{ msgC }}<br>
    D: {{ msgD }}<br>
  </div>
</template>

<style scoped>
  .my-divider {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px 10px;
  }
</style>
